<template>
    <view class="container w-full">
        <view class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px">
            <view class="w-full">
                <view class="w-full flex items-center">
                    <text class="max-w-100% line-clamp-1 text-base font-semibold">华莱士·全鸡汉堡(天河车陂店)</text>
                </view>
                <view class="w-full flex items-center">
                    <text class="i-material-symbols-location-on-outline-rounded w-15px h-15px bg-yellow-400"></text>
                    <text class="w-90% width-100 text-xs line-clamp-2 text-gray-500">天河区高地大街18号101铺（重庆酸菜鱼对面）</text>
                </view>
            </view>
            <view class="w-full flex items-center justify-between mt-10px">
                <view
                    class="width-48 h-50px text-center flex flex-wrap content-center border-2 border-yellow-4 rounded-md">
                    <text class="text-sm block w-full text-center">堂食</text>
                    <text class="text-xs block w-full text-center text-gray-400">店内就餐</text>
                </view>
                <view
                    class="width-48 h-50px text-center flex flex-wrap content-center border-2 border-gray-100 rounded-md">
                    <text class="text-sm block w-full text-center">外带</text>
                    <text class="text-xs block w-full text-center text-gray-400">外卖配送</text>
                </view>
            </view>
        </view>
        <view class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px">
            <text class="block w-full text-sm border-0 border-b-1 border-gray-100 pb-6px box-border mb-5px">点餐详情</text>
            <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                <view class="w-1/5 width-20 h-70px relative overflow-hidden rounded-md">
                    <!-- <text class="absolute left-0 top-0">必选</text> -->
                    <view class="absolute left-0 top-0 z-1">
                        <!-- #ifdef H5 -->
                        <Vue3Lottie :animationData="newJSON" :height="50" :width="50" />
                        <!-- #endif -->
                    </view>
                    <image :lazy-load="true" class="w-full h-full"
                        src="https://p1.meituan.net/deal/e9996c39a0d58509d677b60a9eab131a53412.jpg@180w_164h_1e_1c"
                        mode="aspectFill"></image>
                </view>
                <view class="w-4/5 width-80 h-70px flex flex-wrap pl-2 pr-2 box-border content-between">
                    <view class="w-full">
                        <text class="text-sm font-bold line-clamp-2">辣味鸡肉卷2次卡</text>
                        <text class="block text-xs text-gray-400">已选：孜然</text>
                    </view>
                    <view class="flex justify-between items-center w-full">
                        <text class="font-bold text-sm text-gray-500 mr-1">x1</text>
                        <text class="font-bold text-sm text-gray-500 mr-1">￥12</text>
                    </view>
                </view>
            </view>
            <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                <view class="w-1/5 width-20 h-70px relative overflow-hidden rounded-md">
                    <!-- <text class="absolute left-0 top-0">必选</text> -->
                    <view class="absolute left-0 top-0 z-1">
                        <!-- #ifdef H5 -->
                        <Vue3Lottie :animationData="hotJSON" :height="50" :width="50" />
                        <!-- #endif -->
                    </view>
                    <image :lazy-load="true" class="w-full h-full"
                        src="https://p0.meituan.net/deal/11b28143b98c5b063edc13fa103c885e29455.jpg@180w_164h_1e_1c"
                        mode="aspectFill"></image>
                </view>
                <view class="w-4/5 width-80 h-70px flex flex-wrap pl-2 pr-2 box-border content-between">
                    <view class="w-full">
                        <text class="text-sm font-bold line-clamp-2">双人手扒鸡套餐</text>
                        <text class="block text-xs text-gray-400">已选：不辣</text>
                    </view>
                    <view class="flex justify-between items-center w-full">
                        <text class="font-bold text-sm text-gray-500 mr-1">x1</text>
                        <text class="font-bold text-sm text-gray-500 mr-1">￥20</text>
                    </view>
                </view>
            </view>
            <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                <view class="w-1/5 width-20 h-70px relative overflow-hidden rounded-md">
                    <!-- <text class="absolute left-0 top-0">必选</text> -->
                    <view class="absolute left-0 top-0 z-1">
                        <!-- #ifdef H5 -->
                        <Vue3Lottie :animationData="giftJSON" :height="50" :width="50" />
                        <!-- #endif -->
                    </view>
                    <image :lazy-load="true" class="w-full h-full"
                        src="https://p0.meituan.net/deal/11b28143b98c5b063edc13fa103c885e29455.jpg@180w_164h_1e_1c"
                        mode="aspectFill"></image>
                </view>
                <view class="w-4/5 width-80 h-70px flex flex-wrap pl-2 pr-2 box-border content-between">
                    <view class="w-full">
                        <text class="text-sm font-bold line-clamp-2">1个辣味鸡肉卷+1个牛气冲天堡+1份鸡米花+1份紫薯豌豆派+1份薯条+2杯中可</text>
                        <text class="block text-xs text-gray-400">已选：不辣</text>
                    </view>
                    <view class="flex justify-between items-center w-full">
                        <view class="flex justify-between items-center w-full">
                            <text class="font-bold text-sm text-gray-500 mr-1">x1</text>
                            <text class="font-bold text-sm text-gray-500 mr-1">￥45</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="w-full flex justify-end mt-10px">
                <text class="font-bold text-sm">合计￥256</text>
            </view>
        </view>
        <view
            class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px flex justify-between items-center">
            <text class="text-sm">用餐人数</text>
            <view class="flex items-center">
                <text class="text-sm mr-10px">4人</text>
                <text class="inline-block transform scale-y-120 scale-x-60  text-gray-300 text-base">></text>
            </view>
        </view>
        <view
            class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px flex justify-between items-center">
            <text class="text-sm">备注</text>
            <view class="flex items-center">
                <text class="text-sm mr-10px text-gray-400">特殊要求备注留言</text>
                <text class="inline-block transform scale-y-120 scale-x-60  text-gray-300 text-base">></text>
            </view>
        </view>
        <view
            class="w-full h-50px pl-10px pr-10px box-border bg-white border-0 border-t-1 border-gray-100 flex items-center justify-between fixed bottom-0 left-0 right-0">
            <view class="flex items-center">
                <text class="text-13px">合计:</text>
                <text class="text-13px text-orange-500 font-bold mr-5px">￥256</text>
                <text class="text-13px text-gray-400">(共4份)</text>
            </view>
            <text
                class="block text-black w-90px h-30px flex items-center justify-center rounded-3xl bg-yellow-300 text-13px">立即下单</text>
        </view>
    </view>
</template>

<script setup lang="ts">
// #ifdef H5
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
import newJSON from '../../static/json/new.json'
import hotJSON from '../../static/json/hot.json'
import giftJSON from '../../static/json/gift.json'
// #endif
</script>

<style scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5 !important;
    border: 1rpx solid #f5f5f5;
    overflow-x: hidden;
}
</style>